🏡 index : ~doyle/chartered.git

<script type="typescript">
    import { debounce } from 'lodash';
    import { auth, BASE_URL } from '../../../../stores/auth';
    import Spinner from '../../../../components/Spinner.svelte';
    import Icon from '../../../../components/Icon.svelte';
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    export let hideUuids: string[] = [];

    let loading = false;

    let search = '';
    let searchResults = [];
    $: performSearch(search);

    const onInput = debounce((event) => {
        search = event.target.value;
    }, 250);

    async function performSearch(search: string) {
        if (search === '') {
            return;
        }

        loading = true;

        try {
            let result = await fetch(`${BASE_URL}/a/${$auth.auth_key}/web/v1/users/search?q=${search}`);
            let json = await result.json();

            if (json.error) {
                throw new Error(json.error);
            }

            searchResults = json.users || [];
        } catch (e) {
            console.log(e);
        } finally {
            loading = false;
        }
    }

    function dispatchNewMember(member) {
        dispatch('new', member);
        searchResults = [];
        search = '';
    }
</script>

<div class="flex items-center">
    <input
        placeholder="Start typing a username..."
        on:input={(e) => {
            searchResults = [];
            onInput(e);
        }}
        type="text"
        class="border border-gray-200 dark:border-gray-700 bg-transparent text-sm rounded-lg block p-2.5 ring-blue-500 w-[100%] lg:w-[25%] focus:border-blue-500 mr-1"
    />

    {#if loading}
        <div class="relative h-10 w-10">
            <Spinner />
        </div>
    {/if}
</div>

{#if searchResults.length !== 0}
    <div class="mt-4 grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {#each searchResults as result}
            {#if !hideUuids.includes(result.user_uuid)}
                <button on:click={() => dispatchNewMember(result)} class="flex items-center">
                    {#if result.picture_url}
                        <img
                            alt="Your profile picture"
                            src={result.picture_url}
                            class="rounded-[50%] h-[4rem] w-[4rem] mr-4"
                        />
                    {:else}
                        <div
                            class="h-[4rem] w-[4rem] rounded-[50%] text-gray-300 bg-gray-100 dark:bg-gray-800 overflow-hidden mr-4"
                        >
                            <Icon height="4rem" width="4rem" name="user" />
                        </div>
                    {/if}

                    <span class="card-header">{result.display_name}</span>
                </button>
            {/if}
        {/each}
    </div>
{/if}